<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件对象</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #box {
            margin: 0 auto;
            width: 300px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            background-color: #fedcba;
            font-size: 36px;
        }
    </style>
</head>

<body>
    <div id="box">刘晓兰</div>
</body>

</html>
<script>
    let box = window.document.querySelector('#box');
    box.addEventListener('click', function(e) {
        window.console.log(e);
    });
    // 1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
    // 2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
    // 3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的
    // 4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
    // 5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法
</script>